// Steps

.steps {
  margin-bottom: 10px;
  padding: 0 26px 36px;
  list-style: none;
  @include clearfix();

  &__item {
    float: left;
    position: relative;
    font-size: 18px;

    + .steps__item {
      margin-left: $steps-item-gap;

      &:after {
        position: absolute;
        content: '';
        width: $steps-item-gap;
        height: 2px;
        top: 50%;
        right: 100%;
        margin-top: -1px;
        background-color: #B6C7E0;
      }
    }

    .steps__indicator {
      display: block;
      width: $steps-item-size;
      height: $steps-item-size;
      border-radius: $steps-item-size;
      border: 2px solid $steps-border-base;
      background-color: $steps-bg-base;
      color: $steps-color-base;
      text-align: center;
      line-height: $steps-item-size - 2;
    }
  
    .steps__inner {
      position: absolute;
      top: $steps-item-size + 12;
      left: 50%;
      white-space: nowrap;
      transform: translateX(-50%);
    }

    &.active {
      .steps__indicator {
        color: #fff;
        background-color: $steps-bg-active;
        border-color: $steps-border-active;
      }

      .steps__inner {
        color: $steps-color-active;
      }
    }
  }
}

.steps-container {
  padding: 50px 290px 0;
}
